<template>
  <div class="workspace" @click.stop="pageGlabalEvent">
    <rightMenuComponent :currentItemObj="currentActionInfo.currentItemInfo" :menuPosX="menuPosX" :menuPosY="menuPosY"
      :itemMenuShow="itemMenuShow" :isMoreSelect="false" :globalRightMenuShow="globalRightMenuShow" :menuList="menuList"
      componentsFrom="other" @deleteItem="deleteItem" @reName="reName">
    </rightMenuComponent>
    <!-- 头部 -->
    <div class="workspace_top">
      <a-avatar class="workspace_top_img" :src="mainStore.currentLogData?.userAvatar">
      </a-avatar>
      <div class="workspace_top_title">大屏可视化编辑器</div>
      <!-- {{ mainStore.currentLogData?.nickName }} -->
    </div>
    <!-- 主体 -->
    <div class="content">
      <div class="bg-box flex">
        <!-- 左侧导航栏 -->
        <div class="left">
          <a-menu id="dddddd" mode="inline" @openChange="onOpenChange" :open-keys="openKeys"
            v-model:selectedKeys="selectedKeys">
            <a-sub-menu key="sub4" @click="handleNav('Contentlist')">
              <template #icon>
                <img v-if="currentElementComponent == 'Contentlist'" src="./image/projecticon.png" alt="">
                <img v-else src="./image/projecticonzhihui1.png" alt="">
              </template>
              <template #title>
                <span :style="{ color: currentElementComponent == 'Contentlist' ? '#4355dc' : '' }">
                  项目管理
                </span>
              </template>
              <a-menu-item key="7" class="sublist addline" style="padding-left: 45px !important;"
                @click="getListByFolderId(-1)">
                <!-- <i class="appIcon-iconfont appIcon-xinjianxiangmumoren fileicon" style="color: #686CE8;"></i> -->
                <svg class="icon svgicon" aria-hidden="true">
                  <use :xlink:href="`#icon-suoyouxiangmumoren1`"></use>
                </svg>
                <span :style="{ color: mainStore.folderID == -1 ? '#4355dc' : '' }">
                  所有项目
                </span>
              </a-menu-item>
              <a-menu-item key="9" class="sublist addline" style="padding-left: 45px !important;"
                @click.stop="addNewFolder">
                <!-- <i class="appIcon-iconfont appIcon-xinjianxiangmumoren fileicon" style="color: #686CE8;"></i> -->
                <svg class="icon svgicon" aria-hidden="true">
                  <!-- <use :xlink:href="`#icon-xinjianxiangmumoren`"></use> -->
                  <use :xlink:href="`#icon-xinjianxiangmumoren1`"></use>
                </svg>
                新建标签
              </a-menu-item>
              <a-menu-item v-for="item in folderList" :key="item.officeId" class="sublist folder"
                @click="getListByFolderId(item.officeId)" @contextmenu.prevent.stop="itemClickRight($event, item)">

                <i class="appIcon-iconfont appIcon-wenjianmoren fileicon" style="color: transparent;"></i>
                <!-- 修改名字 -->
                <dl class="name_inp">
                  <a-input v-if="npmeInp == 'inpname_' + item.officeId" :id="'inpname_' + item.officeId"
                    class="name_inp_inp" v-model:value="item.officeTitle" @blur="editTitle(item)"
                    @focus="focusTitle(item)" maxlength="10" placeholder="新建标签" />
                  <span v-else class="inp_span"
                    :style="{ color: mainStore.folderID == item.officeId ? '#686CE8' : '' }"> {{
                    item.officeTitle
                    }}</span>
                  <i v-if="npmeInp == null" class="appIcon-iconfont appIcon-bianji inp_icon"
                    @click="textFocus(item.officeId)"></i>
                </dl>

              </a-menu-item>

            </a-sub-menu>
            <a-menu-item key="sub2" class="group-list" @click="handleNav('Teamwork')">
              <template #icon>
                <img v-if="currentElementComponent == 'Teamwork'" src="./image/groupicon.png" alt="">
                <img v-else src="./image/groupiconzhihui1.png" alt="">
              </template>
              <span class="titleno1">
                团队协作
              </span>
            </a-menu-item>
            <a-menu-item key="sub3" @click="handleNav('Deletlist')">
              <template #icon>
                <img v-if="currentElementComponent == 'Deletlist'" src="./image/trashicon.png" alt="">
                <img v-else src="./image/trashiconzhihui1.png" alt="">
              </template>
              <span class="titleno2">文件回收</span>

            </a-menu-item>

          </a-menu>
          <!-- <a-row class="left_row" @click="handleNav('Contentlist')"
            :class="currentElementComponent == 'Contentlist' ? 'gaoliang' : ''">
            <div class="row_left">
              <img src="./image/xiangmuguanli.png" alt="">
              <span class="text">项目管理</span>
            </div>
            <div class="row_right">
              <i class="appIcon-iconfont appIcon-xiangzuo"></i>
            </div>
          </a-row> -->
          <!-- <a-row class="left_row" @click="handleNav('Deletlist')"
            :class="currentElementComponent == 'Deletlist' ? 'gaoliang' : ''">
            <div class="row_left">
              <img src="./image/huishouzhan.png" alt="">
              <span class="text">文件回收</span>
            </div>
            
          </a-row> -->

        </div>
        <!-- 右侧组件 -->
        <div class="right" @click="mainViewEvent">
          <!-- <Categary :folderId="folderId" v-if='mainStore.currentElementComponent == "Contentlist"'></Categary> -->
          <!-- <Contentlist></Contentlist> -->
          <component ref="pageComponentsRed" :is="mainStore.currentElementComponent"></component>
        </div>
      </div>
    </div>
  </div>
  <!-- 点击删除时弹窗 -->
  <!-- <DelVue v-if="mainStore.del"></DelVue> -->
  <DelVue :delshow="delshow" @shanchu="shanchuFn" :deltexttitle="warringText">
    <template #deltextslot>
      <div class="one">删除标签<br />标签内的项目将会删除</div>
    </template>
  </DelVue>
</template>
<script lang='ts'>
// import request from '@/utils/request'
import { defineComponent, onMounted, reactive, ref, nextTick, toRefs } from 'vue'
import Categary from './components/Categary.vue'
// import Contentlist from './components/Contentlist.vue'
import Contentlist from './OfficeHome/templates.vue'
// import Deletlist from './components/Deletlist.vue'
import Deletlist from './officeRecycle/index.vue'
// import DelVue from './components/Del.vue'
import DelVue from './OfficeShare/Del.vue'
// import Teamwork from './components/Teamwork.vue'
import Teamwork from './OfficeShare/Share.vue'
import OfficeGlobal from '@/utils/officeglobal'
import { useMainStore, useSlidesStore, useKeyboardStore, useScreenStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRouter, useRoute } from 'vue-router'
import rightMenuComponent from './OfficeRightMenu/rightMenu.vue'
import { addCcontent, getCcontentList, editSpaceOffice, deleteContent } from "@/api/content"
import { message } from 'ant-design-vue'
import Delete from '../officeRecycle/index.vue'
import { getCurrentUserInfo } from '@/api/user'
export default defineComponent({
  name: 'workspace',
  components: {
    Categary,
    Contentlist,
    Deletlist,
    DelVue,
    Teamwork,
    rightMenuComponent
  },
  setup() {
    const router = useRouter()
    const routes = useRoute
    const mainStore = useMainStore()

    // test
    const state = reactive({
      rootSubmenuKeys: ['sub4'],
      openKeys: mainStore.openkeysid,
      selectedKeys: [],
    });
    const onOpenChange = (openKeys: string[]) => {
      const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
      // console.log(7878978745445453211131);
      if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
        state.openKeys = openKeys;
        // console.log('openKeystrue', state.openKeys);
        mainStore.storeopenkeysid(state.openKeys)
      } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
        // console.log('openKeysfalse', state.openKeys);
        mainStore.storeopenkeysid(state.openKeys)
      }
    };
    // test

    const { del } = storeToRefs(mainStore)
    const screenStore = useScreenStore()
    const dataList = ref([])
    const npmeInp = ref<any>(null) // 判断是否点击重命名
    const folderId = ref(-1)   //文件夹Id   为-1   时  是创建在根目录的
    const newfolder = ref(false) // 新建文件夹
    const folderList = ref([])
    const currentElementComponent = ref('Contentlist')
    const navList = reactive([{
      component: 'Contentlist',
      name: '项目管理',
      icon: 'icon-wodexiangmu'
    }, {
      component: 'Deletlist',
      name: '文件回收',
      icon: 'icon-wenjianhuishou-zhihuimoren'
    }])
    // 右键菜单列表
    const menuList = reactive({
      globalMenu: [],
      listItemMenu: [
        {
          title: '重命名',
          eventName: 'reName',
          subMenuType: '',
          eventEmitParent: true,
          isShow: true,
          id: 5
        },
        {
          title: '删除',
          eventName: 'deleteItem',
          subMenuType: '',
          eventEmitParent: true,
          isShow: true,
          id: 7
        },
      ],
    })
    // 右键菜单属性
    const menuPosX: any = ref(0)             //右键菜单水平位置
    const menuPosY: any = ref(0)              //右键菜单垂直位置
    const delshow = ref(false)  // 提示框是否显示
    const itemMenuShow = ref(false)          // 列表或者卡片的右键菜单显示
    const globalRightMenuShow = ref(false)          // 列表或者卡片的右键菜单显示
    const warringText = ref('')      //提示框文案信息
    const currentActionInfo = reactive({
      currentItemInfo: {
        officeId: '0'
      },
    })
    // 获取当前登录用户信息
    const getUserInfo = () => {
      getCurrentUserInfo().then((res: any) => {
        // userInfo.data = res.data
        // window.localStorage.setItem('user_id')
        mainStore.storeCurrentLogUserId(res.data.hhxsUserId)
        // console.log("首页",res.data.data.hhxsUserId);
        mainStore.storeCurrentLogData(res.data)
      })
    }
    // 提示框回调函数
    const shanchuFn = (flag: any) => {
      if (flag) {
        doDeleteFolderItem()
      } else {
        delshow.value = false
      }
    }
    // 切换列表  有冲突!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    const pageGlabalEvent = () => {
      itemMenuShow.value = false
      pageComponentsRed.value.hideRightMenu(false)
    }
    const handleNav = (component: string) => {
      // console.log(currentElementComponent.value);
      itemMenuShow.value = false
      currentElementComponent.value = component
      mainStore.$patch({ currentElementComponent: component })
      // 点击团队协作时需要关闭项目管理
      if (component !== 'Contentlist') {
        state.openKeys = [''];
        let titleno1 = <HTMLImageElement>document.querySelector('.titleno1')
        titleno1.style.color = ''
        let titleno2 = <HTMLImageElement>document.querySelector('.titleno2')
        titleno2.style.color = ''
      } else {
        let titleno1 = <HTMLImageElement>document.querySelector('.titleno1')
        titleno1.style.color = '#afacc7'
        let titleno2 = <HTMLImageElement>document.querySelector('.titleno2')
        titleno2.style.color = '#afacc7'
      }

    }
    const getFolderList = () => {
      const params = {
        form: {
          "officeFileType": 3,   //文件类型：1：文件夹；2：文件；3：标签
          "officeOwnershipType": 5, // 所有权：-1 全部（默认）；1私有的；2共享的；3：我共享的；4：共享给我的；5：我创建的
          "officeType": OfficeGlobal.officeType, //应用类型：1：笔记；2：思维导图；3：流程图；4：PPT；5：技能树；6：自由编辑器
          // "officeLabelId": -1, // 所属标签ID；'-1'查询所有，'0'查询根目录；
          "officeSortType": 2, //（删除时间）排序类型：1 正序；2 倒叙；
        },
        size: 1000
      }
      getCcontentList(params).then((res: any) => {
        folderList.value = res.data.data.records
        if (newfolder.value == true) {
          textFocus(pId.value)
          newfolder.value = false
        }
      })
    }
    // 添加文件夹
    const pId = ref('')
    // 新建文件夹（标签）
    const addNewFolder = () => {
      const params = {
        "officeFileType": 3,   //类型：1：文件夹；2：文件；3：标签
        "officeOwnership": 1,
        "officeParentId": 0,
        "officeTitle": "",
        "officeType": OfficeGlobal.officeType
      }
      addCcontent(params).then((res) => {
        // console.log("新建成功：", res.data.data)
        pId.value = res.data.data
        if (pId) {
          getFolderList()
          newfolder.value = true
          textFocus(pId.value)
          // textFocus(new Date().getTime() + '')
        }
      })
    }
    // 文件夹右键菜单事件
    const itemClickRight = (e: any, item: any) => {
      // console.log('itemClickRight',item);

      currentActionInfo.currentItemInfo = item
      menuPosX.value = e.pageX;
      menuPosY.value = e.pageY;
      itemMenuShow.value = true
    }
    // 获取所有内容
    const pageComponentsRed: any = ref(null)
    const getListByFolderId = (folder_id: any) => {
      // router.replace({
      //   path: '/',
      //   params: {
      //     id: folder_id
      //   }
      // })
      // console.log('routes', routes);

      folderId.value = folder_id
      itemMenuShow.value = false
      pageComponentsRed.value.postFolderId(folder_id)
      mainStore.storeFolderID(folder_id)
      // console.log(1111, 4566);
      // console.log(1111, folder_id);
      // console.log(mainStore.folderID, "这个是");
    }

    // 右键重命名
    const reName = () => {
      // console.log('reName');
      itemMenuShow.value = false
      textFocus(currentActionInfo.currentItemInfo.officeId)
    }
    // 删除一个文件夹
    const deleteItem = () => {
      warringText.value = '删除标签,标签内的项目将会删除'
      itemMenuShow.value = false
      delshow.value = true
    }
    const doDeleteFolderItem = () => {
      let params = {
        officeId: currentActionInfo.currentItemInfo.officeId
      }
      deleteContent(params).then((res: any) => {
        delshow.value = false
        getFolderList()
        getListByFolderId(-1)
      })
    }
    // 点击名字重命名
    const textFocus = (item: string) => {
      npmeInp.value = 'inpname_' + item
      nextTick(() => {
        document.getElementById('inpname_' + item)?.focus()
      })
    }
    // 聚焦事件
    const itemTitle = ref<any>('')
    const focusTitle = (item: any) => {
      itemTitle.value = item.officeTitle
      // console.log('itemTitle', itemTitle.value)
    }
    // 失焦事件
    const editTitle = (item: any) => {
      // console.log('itemTitle', itemTitle.value)
      // console.log('item.officeTitle', item.officeTitle)
      // if(item.officeTitle != itemTitle.value) {
      let params = {
        officeId: item.officeId,
        officeTitle: item.officeTitle.length > 0 ? item.officeTitle : '新建标签'
      }
      editSpaceOffice(params).then((res: any) => {
        npmeInp.value = null
        getFolderList()
      })
      // console.log(item, "biaoi")
      // }
    }
    const mainViewEvent = () => {
      // console.log('mainViewEvent')

      itemMenuShow.value = false
      globalRightMenuShow.value = false
    }
    onMounted(async () => {
      await getUserInfo()
      // await getFolderList()
      screenStore.setScreening(false)
      screenStore.setRenderData(true)
    })
    return {
      router,
      routes,
      dataList,
      folderList,
      handleNav,
      addNewFolder,
      currentElementComponent,
      navList,
      mainStore,
      textFocus,
      npmeInp,
      folderId,
      editTitle,
      focusTitle,
      getListByFolderId,
      pageComponentsRed,
      mainViewEvent,
      menuPosX,
      menuPosY,
      itemMenuShow,
      globalRightMenuShow,
      currentActionInfo,
      reName,
      menuList,
      deleteItem,
      itemClickRight,
      warringText,
      shanchuFn,
      delshow,
      onOpenChange,
      ...toRefs(state),
      pageGlabalEvent // 有冲突!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    }
  },
})
</script>

<style lang='scss' scoped>
.one {
  font-size: 18px;
  color: #6f6d9d;
  text-align: center;
  line-height: 1.5;
  margin-top: 8px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.fontsize14 {
  font-size: 14px;
}

.fontsize16 {
  font-size: 16px;
}

.fontsize18 {
  font-size: 18px;
}

.fontsize20 {
  font-size: 20px;
}

.fontsize22 {
  font-size: 22px;
}

.fontsize24 {
  font-size: 24px;
}

.workspace {
  // background: linear-gradient(45deg, #8EC5FC 0%, #E0C3FC 50%, #ffbc9f 100%);
  width: 100%;
  height: 100vh;
  // padding: 30px;

  .content {
    // border-radius: 40px;
    background: #1b1e23;
    height: calc(100vh - 105px);
    // padding: 20px;
    box-sizing: border-box;

    .bg-box {
      background: #1b1e23;
      height: 100%;
      border-radius: 30px;
    }

    .left {
      overflow: auto;
      background: #22252c;
      padding: 50px 20px 0;
      width: 0px;
      height: 100%;
      font-size: 18px;
      display: none;

      .gaoliang {
        color: $textH2Color;
      }

      .left_row {
        display: flex;
        align-items: center;
        justify-content: space-around;
        transition: all 0.3s;
        cursor: pointer;
        margin-bottom: 50px;

        &.on {
          color: $textH2Color;
        }

        &:hover {
          color: $textH2Color;
          transform: translateX(10px);
        }

        .text {
          margin-left: 15px;
        }
      }

      .row_left {
        display: flex;
        align-items: center;
      }



      li {
        height: 30px;
        margin-bottom: 50px;
        padding: 0 50px;
        line-height: 30px;
        cursor: pointer;
        color: $textDisabledColor;
        transition: .5s all ease;

        dd {
          display: flex;

          i {
            margin-right: 10px;
          }
        }

        &.on {
          color: $textH2Color;
        }

        &:hover {
          color: $textH2Color;
          transform: translateX(10px);
        }
      }
    }

    .right {
      width: calc(100% - 0px);
      background-color: #22252c;
    }
  }
}

.fileicon {
  margin-right: 19px;
  font-size: 18px;
}

.svgicon {
  margin-right: 25px;
  width: 24px;
  height: 24px;
}

.workspace_top {
  width: 100%;
  height: 105px;
  background-color: #1b1e23;
  color: #bfbcb0;
  display: flex;
  align-items: center;
}

.workspace_top_img {
  width: 44px;
  height: 44px;
  margin: 0 20px 0 38px;
}

.workspace_top_title {
  font-size: 30px;
  color: #dddde7;
}
</style>
<style lang="scss">
.workspace {
  .ant-menu-item-selected {
    box-shadow: none;
  }

  .ant-menu-title-content {
    .inp_span {
      color: #fff;

      &:hover {
        color: #4355dc;
      }
    }
  }

  .ant-menu-sub {
    max-height: calc(100vh - 410px);
    overflow-y: auto;
  }

  .name_inp_inp {
    background-color: transparent;
    border: none;
    outline: none;
    // text-align: center;
    font-size: 18px;

    &:hover {
      cursor: default;
    }

    &:focus {
      background-color: transparent;
      color: #000;
      border-radius: 15px;
      border: none;
      outline: none;
      box-shadow: none;
    }
  }


  .name_inp {
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    // padding: 0 10px;

    .inp_span {
      font-size: 18px;
      color: #626377;
      transition: all 0.2s;
      padding: 0 10px;
    }

    .inp_icon {
      color: #626377;
      font-size: 18px;
      display: none;
    }

    &:hover {
      .inp_icon {
        display: inline-block;
      }
    }

  }
}
</style>